<template>
  <div>
    <br/><br/><br/><br/>

    <div v-if="this.flowerOrder.status!=1" style="width: 1240px">
      <el-empty description="订单已不能支付或不存在" :image-size="500">
      </el-empty>
    </div>

    <div v-else>
      <div>
        <p>
          <span>请选择收货地址</span>
        </p>
        <br/>
        <el-table ref="singleTable" :data="addressList" style="width: 1350px;font-size: 20px" highlight-current-row
                  @current-change="checkAddress">
          <el-table-column label="收货地址" width="500px">
            <template slot-scope="scope">
          <span>
            {{ scope.row.proviceName }}
            {{ scope.row.cityName }}
            {{ scope.row.areaName }}
            {{ scope.row.streetName }}
            {{ scope.row.villagesName }}
            {{ scope.row.details }}
          </span>
            </template>
          </el-table-column>
          <el-table-column property="receiverName" label="收货人">
          </el-table-column>
          <el-table-column property="receiverTel" label="收货电话">
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top: 50px">
        <p>
          <span>确认商品清单</span>
        </p>
        <div align="center">
          <el-table :data="flowerOrder.orderItems" style="width: 100%;margin-top: 30px;font-size: 20px">
            <el-table-column prop="flowerName" label="商品名称">
            </el-table-column>
            <el-table-column prop="flowerImg" label="展示图">
              <template slot-scope="scope">
                <img :src="'http://localhost:8088/image'+scope.row.flowerImg" style="width: 150px; height: 150px;"
                     alt="flowerImg">
              </template>
            </el-table-column>
            <el-table-column prop="flowerPrice" label="单价">
              <template slot-scope="scope">
                <span>￥{{ scope.row.flowerPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="buyCount" label="购买数量">
            </el-table-column>
            <el-table-column prop="subTotal" label="小计">
              <template slot-scope="scope">
                <span>￥{{ scope.row.subTotal }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div style="margin-top: 50px;height: 200px;">
        <p>
          <span style="font-size: 20px;float: left">贺卡留言:</span>
        </p>
        <div style="float: left;margin-left: 20px;">
          <el-input type="textarea" :rows="9"
                    placeholder="可在此处留言（选填）"
                    v-model="flowerOrder.remark"
                    style="width: 500px">
          </el-input>
        </div>
        <div style="float: right;text-align: right">
          <p>
          <span>
            <strong>应付总额：</strong>
            <span style="font-size: 40px;color: red">￥{{ flowerOrder.total }}</span>
          </span>
          </p>
          <p>
          <span>
            <strong>收货地址：</strong>
            {{
              checkedAddress.proviceName
              + checkedAddress.cityName
              + checkedAddress.areaName
              + checkedAddress.streetName
              + checkedAddress.villagesName
              + checkedAddress.details
            }}</span>
          </p>
          <p>
          <span>
            <strong>收货人：</strong>
            <span style="font-size: 20px">{{ checkedAddress.receiverName }}</span>
            </span>
          </p>
          <p>
          <span>
            <strong>联系电话：</strong>
            {{ checkedAddress.receiverTel }}</span>
          </p>
          <div style="margin-top: 20px">
            <el-button type="primary" style="width: 150px;height: 50px" @click="pay()">支付订单</el-button>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "CheckOutView",
  data() {
    return {
      accountId: "2",
      accountName: "jack",

      orderId: "",
      flowerOrder: {},

      addressList: [],
      checkedAddress: {},

      count: 0,
    }
  },
  created() {
    this.getLogin();
    this.selectOrderByOrderId();
  },
  updated() {
    let table = this.$refs.singleTable;
    if (table) {
      this.count = this.count + 1;
      this.selectAllAddressByAccountId();
    }
  },
  methods: {
    // 得到登录信息
    getLogin() {
      this.accountId = sessionStorage.getItem("accountId");
      this.accountName = sessionStorage.getItem("accountName");
    },
    // 得到订单信息
    selectOrderByOrderId() {
      this.orderId = sessionStorage.getItem("orderId");
      this.$axios.get("/flowerOrder/selectOrderByOrderId", {
        params: {
          orderId: this.orderId
        }
      }).then(res => {
        this.flowerOrder = res.data.data;
      })
    },
    // 得到收货地址并选中默认
    selectAllAddressByAccountId() {
      console.log(this.count);
      if (this.count == 1) {
        this.$axios.get("/userAddress/selectAllAddressByAccountId", {
          params: {
            accountId: this.accountId
          }
        }).then(res => {
          this.addressList = res.data.data;
          if (this.flowerOrder.status != 0) {
            for (let i = 0; i < this.addressList.length; i++) {
              let table = this.$refs.singleTable;
              if (table != undefined && this.addressList[i].isDefault === 1) {
                table.setCurrentRow(this.addressList[i]);
                this.checkedAddress = this.addressList[i];
              }
            }
          }
        });
      }
    },
    // 更改收货地址
    checkAddress(val) {
      let params = new URLSearchParams;
      params.append("orderId", this.orderId);
      params.append("addressId", val.addressId);
      this.$axios.post("/flowerOrder/updateAddressIdByOrderId", params)
          .then(res => {
            if (res.data.code == 200) {
              this.checkedAddress = val;
            } else {
              Message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              })
            }
          })
    },
    // 支付
    pay() {
      let params1 = new URLSearchParams;
      params1.append("orderId", this.orderId);
      params1.append("remark", this.flowerOrder.remark);
      this.$axios.post("/flowerOrder/updateOrderByOrderId", params1)
          .then(res => {
            console.log(res.data.msg);
          });
      let params = new URLSearchParams;
      params.append("orderId", this.orderId);
      params.append("total", this.flowerOrder.total);
      params.append("name", "鲜花订单");
      this.$axios.post("/alipay/query", params)
          .then(res => {
            if (res.data.code == 900) {
              const payUrl = "http://localhost:8050/alipay/pay?orderId=" +
                  encodeURIComponent(this.orderId) +
                  "&total=" + encodeURIComponent(this.flowerOrder.total) +
                  "&name=" + encodeURIComponent("鲜花订单");
              let token = sessionStorage.getItem("token");
              const payUrlWithToken = payUrl + "&token=" + encodeURIComponent(token);
              console.log(payUrlWithToken);
              window.location.href = payUrlWithToken;
            } else if (res.data.code == 200) {
              Message({
                type: "success",
                message: res.data.msg,
                duration: 1000
              })
              this.$router.push('/order');
            } else {
              Message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              })
            }
          })
    },
  },
}
</script>